<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="contextPath" value="${pageContext.request.contextPath}"></c:set>

<title>消息 - 云超市</title>
<link href="${contextPath}/static/ztree/css/zTreeStyle.css" rel="stylesheet"/>
<link href="${contextPath}/static/summernote/summernote.css" rel="stylesheet"/>
<style type="text/css">

    .row11 {
        margin-top: 40px;
    }

    .inputfile {
        width: 0.1px;
        height: 0.1px;
        opacity: 0;
        overflow: hidden;
        position: absolute;
        z-index: -1;
    }

    .inputfile + label {
        font-size: 1.00em;
        font-weight: 700;
        color: white;
        padding: 4px;
        background-color: #3386b7;
        display: inline-block;
    }

    .inputfile:focus + label,
    .inputfile + label:hover {
        padding: 4px;
        background-color: #3392b7;
    }

    .inputfile + label {
        cursor: pointer; /* "hand" cursor */
    }

    .inputfile:focus + label {
        outline: 1px dotted #000;
        outline: -webkit-focus-ring-color auto 5px;
    }

    .inputfile + label * {
        pointer-events: none;
    }

</style>

<div class="row">
    <div class="col-sm-5">
        <div class="row row11">
            <div class="col-sm-3" style="text-align: right;font-size: 15px;">标题：</div>
            <div class="col-sm-9">
                <input type="text" class="form-control" id="title" name="title" placeholder="请输入标题">
            </div>
        </div>

        <div class="row" style="margin-top: 20px;">
            <div class="col-sm-3" style="text-align: right;font-size: 15px;">副标题：</div>
            <div class="col-sm-9">
                <input type="text" class="form-control" id="title111" name="content" placeholder="请输入副标题">
            </div>
        </div>

        <div class="row" style="margin-top: 20px;">
            <div class="col-sm-3" style="text-align: right;font-size: 15px;">发送方：</div>
            <div class="col-sm-9">
                <select class="form-control" id="faSongFang">
                    <option value="000">小 云</option>
                    <%--<option value="005">店铺助手</option>--%>
                    <option value="007">大喇叭</option>
                    <option value="-66">银叶通</option>
                </select>
                <input placeholder="小云ID" id="cloudlingId"><br>
                <input style="width: 200px;" placeholder="开始用户ID(全部模式发送时可填)" id="firstUserId"><br>
                <input style="width: 200px;" placeholder="结束用户ID(全部模式发送时可填)" id="endUserId">
            </div>
        </div>

        <div class="row" style="margin-top: 20px;">
            <div class="col-sm-3" style="text-align: right;font-size: 15px;">接收方：</div>
            <div class="col-sm-9">
                <select class="form-control" id="sendType" onchange="changeSendType()">
                    <option value="1">全 部</option>
                    <option value="2">渠 道</option>
                    <option value="3">角 色</option>
                    <option value="4">电话号码</option>
                </select>
            </div>
        </div>

        <div class="row" style="margin-top: 10px;">
            <div class="col-sm-3" style="text-align: right;font-size: 15px;"></div>
            <div class="col-sm-9">
                <div class="hide" id="quDaoInputDiv">
                    <input type="text" class="form-control" name="quyu" id="quyu" value="" placeholder="点击选择渠道">
                    <input type="hidden" id="submitQuDaoId" name="submitQuDaoId"/>
                </div>
                <div class="hide" id="roleInputDiv">
                    <select class="form-control" id="characterSelect">
                        <option name="characterOption" value="0">--- 请选择角色 ---</option>
                        <option name="characterOption" value="002">客户经理</option>
                        <option nane="characterOption" value="003">店主</option>
                        <option name="characterOption" value="004">普通用户</option>
                    </select>
                </div>
                <div class="hide" id="phoneInputDiv">
                    <input type="text" class="form-control" name="mobile" id="haracterMobile" value=""
                           placeholder="请输入电话号码,多个电话号码用英文','隔开">
                </div>
            </div>
        </div>

        <div class="row" style="margin-top: 20px;">
            <div class="col-sm-3" style="text-align: right;font-size: 15px;">封面：</div>
            <div class="col-sm-9">
                <input type="file" name="file" id="image_file_input" class="inputfile"/>
                <label for="image_file_input"><i class="ace-icon fa fa-folder-open"></i> 请选择图片</label>
            </div>

        </div>

        <div class="row" style="margin-top: 20px;">
            <div class="col-sm-3" style="text-align: right;font-size: 15px;">预览：</div>
            <div class="col-sm-9">
                <img id="showImageInfoImg" style="width: 300px; height: 140px;"
                     src=""
                     alt="..." class="img-thumbnail">
            </div>
        </div>

        <div class="row row11">
            <div class="col-sm-3" style="text-align: right;font-size: 15px;"></div>
            <div class="col-sm-8">
                <button class="btn btn-info  btn-sm" id="cBtn" onclick="submitImageMesssage()">发送</button>
            </div>
        </div>
    </div>
    <div class="col-sm-7">
        <div class="row row11">
            <div class="col-sm-2" style="text-align: right;font-size: 15px;">内容：</div>
            <div class="col-sm-8">
                <div id="summernote"></div>
                <div class="hide" id="summernoteResidueByte" style="color:red;">还能再输入0个字符</div>
            </div>
        </div>
    </div>
</div>


<!-- 区域选择模态框 -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span
                        class="sr-only">关闭</span></button>
                <h4 class="modal-title" id="myModalLabel">请选择渠道</h4>
            </div>
            <div class="modal-body">

                <div class="content_wrap">
                    <div class="zTreeDemoBackground left">
                        <ul id="treeDemo" class="ztree"></ul>
                    </div>

                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-default btn-xs" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary btn-xs" onclick="confrimQuDao();">确认</button>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- 渠道选择的值保存在这里 -->
<input type="hidden" id="quDaoId"/>
<input type="hidden" id="quDaoName"/>

<input type="text" name="fileStr" id="fileStr" style="display:none"/>
<input type="text" name="fileType" id="fileType" style="display:none"/>

<script>
    var scripts = [null, "${contextPath}/static/ztree/js/jquery.ztree.core-3.5.js", "${contextPath}/static/ztree/js/jquery.ztree.excheck-3.5.js", null]
    $('.page-content-area').ace_ajax('loadScripts', scripts, function () {
        jQuery(function ($) {
            $("#quyu").bind("click", function () {
                $("#myModal").modal("show");
            });
            var setting = {
                check: {
                    enable: true,
                    chkStyle: "radio",
                    radioType: "level"
                },
                data: {
                    simpleData: {
                        enable: true,
                        idKey: "id",
                        pIdKey: "pid",
                        rootPId: 0,
                    }
                },
                callback: {
                    onCheck: zTreeOnCheck
                },
                /* 	async: {
                 enable: true,
                 dataType: "json",
                 type: "post",
                 contentType: "application/x-www-form-urlencoded",
                 url: "{ctx}/api/cloudling/findChlChannel",
                 autoParam: ["id", "pId" ,"cck"]
                 } */
            };


            var zNodes = [
                {id: -1, pId: 0, name: "烟草", cck: 1, open: true},
                /* { id:11, pId:1, name:"随意勾选 1-1", open:true},
                 { id:111, pId:11, name:"随意勾选 1-1-1"},
                 { id:112, pId:11, name:"随意勾选 1-1-2"},
                 { id:12, pId:1, name:"随意勾选 1-2", open:true},
                 { id:121, pId:12, name:"随意勾选 1-2-1"},
                 { id:122, pId:12, name:"随意勾选 1-2-2"}, */
                {id: -2, pId: 0, name: "矿泉水", cck: 1, open: false},
                /* { id:21, pId:2, name:"随意勾选 2-1"},
                 { id:22, pId:2, name:"随意勾选 2-2", open:true},
                 { id:221, pId:22, name:"随意勾选 2-2-1", checked:true},
                 { id:222, pId:22, name:"随意勾选 2-2-2"},
                 { id:23, pId:2, name:"随意勾选 2-3"}, */
                {id: -3, pId: 0, name: "其它", cck: 1, open: false},
            ];

            $.ajax({
                url: "${contextPath}/sys/cloudling/findAllChlChannel",
                type: "get",
                dataType: "json",
                async: false,
                success: function (data) {
                    zNodes = zNodes.concat(data.data);
                }
            });
            var code;

            function setCheck() {
                var type = $("#level").attr("checked") ? "level" : "all";
                setting.check.radioType = type;
                showCode('setting.check.radioType = "' + type + '";');
                $.fn.zTree.init($("#treeDemo"), setting, zNodes);
            }

            function showCode(str) {
                if (!code) code = $("#code");
                code.empty();
                code.append("<li>" + str + "</li>");
            }

            function zTreeOnCheck(event, treeId, treeNode) {

                $("#quDaoId").val(treeNode.id);
                $("#quDaoName").val(treeNode.name);
                //alert($("#quDaoId").val()+ "," + $("#quDaoName").val());
            };

            $(document).ready(function () {
                setCheck();
                $("#level").bind("change", setCheck);
                $("#all").bind("change", setCheck);
            });

            var input = document.getElementById("image_file_input");
            //var result =  document.getElementById("fileStr1");
            //var img_area = document.getElementById("img_area");
            if (typeof(FileReader) === 'undefined') {
                alert("抱歉，你的浏览器不支持 FileReader，请使用现代浏览器操作！");
                input.setAttribute('disabled', 'disabled');
            } else {
                input.addEventListener('change', readFile, false);
            }

            function readFile() {
                var file = this.files[0];
                if(file == undefined) {
                    //layer.msg("发送内容过大，请检查图片和内容");
                    $("#showImageInfoImg").attr("src","");
                    $("#fileStr").val("");
                    $("#fileType").val("");
                    return;
                }
                //这里我们判断下类型如果不是图片就返回 去掉就可以上传任意文件
                if (!/image\/\w+/.test(file.type)) {
                    layer.msg("请确保文件为图像类型");
                    return false;
                }
                var reader = new FileReader();
                reader.readAsDataURL(file);
                reader.onload = function (e) {
                    $("#fileStr").val(this.result);
                    //document.getElementById("fileStr").value = '<img src="'+this.result+'" alt=""/>';
                    //img_area.innerHTML = '<div class="sitetip">图片img标签展示：</div><img src="'+this.result+'" alt=""/>';
                    //alert($("#fileStr").val());
                    $("#fileType").val(file.type);
                    //alert(file.type);
                    $("#showImageInfoImg").attr("src", this.result);
                }
            }

        })
    })
</script>

<script src="${contextPath}/static/layer/layer.js"></script>
<script src="${contextPath }/static/summernote/summernote.min.js"></script>
<script src="${contextPath }/static/summernote/lang/summernote-zh-CN.min.js"></script>
<script type="text/javascript">
    var changeSendType = function () {
        var value = $("#sendType").val();
        var $quDaoInputDiv = $("#quDaoInputDiv")
        var $roleInputDiv = $("#roleInputDiv")
        var $phoneInputDiv = $("#phoneInputDiv")

        switch (value) {
            case '1' :
                $quDaoInputDiv.addClass("hide")
                $roleInputDiv.addClass("hide")
                $phoneInputDiv.addClass("hide")
                break;
            case '2' :
                $quDaoInputDiv.removeClass("hide")
                $roleInputDiv.addClass("hide")
                $phoneInputDiv.addClass("hide")
                break;
            case '3' :
                $quDaoInputDiv.addClass("hide")
                $roleInputDiv.removeClass("hide")
                $phoneInputDiv.addClass("hide")
                break;
            case '4' :
                $quDaoInputDiv.addClass("hide")
                $roleInputDiv.addClass("hide")
                $phoneInputDiv.removeClass("hide")
                break;
            default:
                break;

        }
    }


    function confrimQuDao() {
        var quDaoId = $("#quDaoId").val();
        var quDaoName = $("#quDaoName").val();
        if (quDaoId == null || quDaoId == "") {
            alert("请选择渠道");
            return;
        }
        $("#quyu").val(quDaoName);
        $("#submitQuDaoId").val(quDaoId);
        $("#myModal").modal("hide");
    }

    function submitImageMesssage() {
        var formData = {};
        //标题验证
        var title = $("#title").val();
        if (title.trim() == "") {
            layer.msg("请输入标题")
            return;
        }
        formData["title1"] = $("#title").val();
        formData["title2"] = $("#title111").val();


        formData["faSongFang"] = $("#faSongFang").val();
        var optionValue = $("#sendType").val();
        formData["model"] = optionValue;
        switch (optionValue) {
            case '1':

                break;
            case '2':
                var quDaoId = $("#submitQuDaoId").val();
                if (quDaoId == null || quDaoId == "") {
                    layer.msg("请选择渠道");
                    return;
                }
                formData["quDaoId"] = quDaoId;
                break;
            case '3':
                var role = $("#characterSelect").val();
                if (role == 0) {
                    layer.msg("请选择要发送的角色");
                    return;
                }
                formData["roleId"] = role;
                break;
            case '4':
                var phone = $("#haracterMobile").val();
                if (phone == null || phone == "") {
                    layer.msg("请输入电话号码");
                    $("#haracterMobile").focus();
                    return;
                }
                var strs = new Array(); //定义一数组
                strs = phone.split(","); //字符分割
                for (var i = 0; i < strs.length; i++) {
                    // alert(strs[i]) //分割后的字符输出
                    if (!(/^1[34578]\d{9}$/.test(strs[i]))) {
                        layer.msg("号码 [ " + strs[i] + " ] 有误，请检查");
                        return;
                    }
                }
                formData["phone"] = phone;
                break;
            default:
                layer.msg("请选择发送模式");
                break;
        }
        formData["type"] = "image";

        var fileType = $("#fileType").val();
        if (fileType == "") {
            layer.msg("请选择图片")
            return;
        }

        var imageFile = $("#image_file_input")[0].files[0];

        if (imageFile.size > 524288) {
            layer.msg("封面图片不得大于512KB")
            return
        }

        var fileStr = $("#fileStr").val();
        var index = fileStr.indexOf("base64,");

        if (index > 0) {
            fileStr = fileStr.substring(index + 7);
            var fileType = $("#fileType").val();
            fileType = fileType.substring(6);
            $("#fileStr").val(fileStr);
            $("#fileType").val(fileType);
        }
        formData["fileStr"] = $("#fileStr").val();
        formData["fileType"] = $("#fileType").val();

        if ($.trim($('#summernote').summernote("code")) == "<br>" || $.trim($('#summernote').summernote("code")) == "" || $.trim($('#summernote').summernote("code")) == "<p><br></p>") {
            layer.msg("请输入内容");
            $('#summernote').summernote("focus");
            return;
        }
        //console.log($('#summernote').summernote("code").length)
        if($('#summernote').summernote("code").length > 1000000) {
            layer.msg("发送内容过大，请调整");
            $('#summernote').summernote("focus");
            return;
        }

        //return
        formData["text"] = $('#summernote').summernote("code");
        formData["cloudId"] = $("#cloudlingId").val();
        formData["firstUserId"] = $("#firstUserId").val();
        formData["endUserId"] = $("#endUserId").val();
       // console.log(formData)
        //return
        layer.load(1);
        $.ajax({
            type: 'POST',
            url: '${contextPath}/sys/cloudling/submit',
            data: formData,
            dataType: 'json',
            success: function (data) {
                //alert(data.message);
                layer.closeAll('loading');
                layer.open({
                    title: '提示信息',
                    closeBtn: 0,
                    shadeClose: true,
                    skin: 'yourclass',
                    content: data.message,
                });
            },
            error: function (result) {
                var message = "未知错误，请联系技术人员"
                if (result.status == 413){
                    message = "发送内容过大，请检查图片和内容";
                }
                if (result.status == 504){
                    message = "发送成功";
                }
                console.info(result);
                //alert("服务器异常，请联系技术人员");
                layer.closeAll('loading');
                layer.open({
                    title: '提示信息',
                    closeBtn: 0,
                    shadeClose: true,
                    skin: 'yourclass',
                    content: message,
                });
            }
        });

    }


</script>


<script>
    $('#summernote').summernote({
        placeholder:'请输入文章内容...',
        height: 600, // set editor height
        minHeight: null, // set minimum height of editor
        maxHeight: 800, // set maximum height of editor
        focus: false,
        lang: 'zh-CN',
        callbacks : {
            onChange : function (contents) {
                var $summernoteResidueByte = $("#summernoteResidueByte");
                if (contents.length > 1000000-100) {
                    if($summernoteResidueByte.hasClass("hide")){
                        $summernoteResidueByte.removeClass("hide");
                    }
                    $summernoteResidueByte.html("您还可以输入"+(1000000-contents.length)+"个字");
                }else {
                    if(!$summernoteResidueByte.hasClass("hide")){
                        $summernoteResidueByte.addClass("hide");
                    }
                }
            }
        }

        // set focus to editable area after initializing summernote
    });


</script>
